<template>
  <div class="singer">
   <list-view @select="selectSinger"  :dataA="singers"></list-view>
   <router-view></router-view>
  </div>
</template>
<!-- 
     1 better-scroll 的的原理 父元素的高度要定义好 子元素的高度去撑开他 
-->

<script>
	  import ListView from 'base/listview/listview'
	  import {getSingerList} from 'api/singer'
	  import {ERR_OK} from 'api/config'
	  import Singer from 'common/js/singer'
	  import {mapMutations} from 'vuex'
	  import {playlistMixin} from 'common/js/mixin'
// 	
	  const HOT_SINGER_LEN = 10
	  const HOT_NAME = '热门'
export default {

  name:'singer',
	data() {
		return {
			singers:[]
		}
	},
// 	props: {
// 		dataA:{
// 			type: Array,
// 			default:[]
// 		}
// 	},
	created(){
		this._getSingerList()
	},
  components: {
     ListView
  },
	methods: {
		selectSinger(singer) {
			this.$router.push({path:`/singer/${singer.id}`})
			this.setSinger(singer)
		},

		_getSingerList() {
			getSingerList().then((res) => {
				if (res.code === ERR_OK) {
					this.singers = this._normalizeSinger(res.data.list)
				}
			})
		},
		
		_normalizeSinger(list) { //处理数据
			 let map={ // 编写自己想要的数据结构
				 hot:{
					 title:HOT_NAME ,
					 items:[]
				 }
			 }
			 
			 list.forEach((item, index) => { //只遍历前10前热们数据
			 	if (index < HOT_SINGER_LEN) {
			 		map.hot.items.push(new Singer({
			 			name: item.Fsinger_name,
			 			id: item.Fsinger_mid
			 		}))
			 	}
			 	const key = item.Findex
			 	if (!map[key]) { //如果没有数据 就在添加数据
			 		map[key] = {
			 			title: key,
			 			items: []
			 		}
			 	}
			 	map[key].items.push(new Singer({//
			 		name: item.Fsinger_name,
			 		id: item.Fsinger_mid
			 	}))
				
			})
			//为了得到有序列表 处理map
			let hot=[] //热门
			let ret=[] //剩下的
			for (let key in map) {
				let val=map[key]
				if(val.title.match(/[a-zA-Z]/)){ //字母位子标
					ret.push(val)
				}else if(val.title==HOT_NAME){ //剩下的热们歌手
					hot.push(val)
				}
			}
			ret.sort((a,b)=>{ //比较字母大小 确定位置
				return a.title.charCodeAt(0)-b.title.charCodeAt(0)
			})
			
			return hot.concat(ret)
     }
		 ,
		 ...mapMutations({
		 	setSinger: 'SET_SINGER'
		 })
		 
	},
	
}
</script>

<style lang="less"  scoped>
   @import "../../common/stylus/variable.less";
   .singer{
		 
		 position: fixed;
		 top: 88px;
		 bottom: 0;
		 width: 100%;
		 
	 }
   
   
</style>
